<template>
	<view class="box-bg">
				<uni-nav-bar backgroundColor="#f5f5f5" shadow left-icon="left" title="安全支付" :border='false' :shadow='false' @clickLeft="goBack" />
			</view>
	<uni-steps :options="orderStatus" active-color="#007AFF" active-icon="checkbox" :active="active"
		direction="column" />
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const active = ref(2)
	const orderStatus = [{
			desc: '2098-11-26 12:05',
			title: '订单已完成',
			description: '感谢你使用小默旅行'
		},
		{
			desc: '2098-11-25 13:50',
			title: '已使用',
			description: '你已到达景点参观'
		},
		{
			desc: '2098-11-20 10:05',
			title: '已支付',
			description: '订单支付成功'
		},
		{
			desc: '2098-11-20 10:04',
			title: '订单提交成功',
			description: '订单号: 2311201173310086'
		}
	]

	function change() {
		if (active < list1.length - 1) {
			active += 1
		} else {
			active = 0
		}
	}
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	:deep(.uni-steps__column-text) {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 20rpx;
		margin: 20rpx;
	}
</style>